﻿<phone:PhoneApplicationPage 
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:WindowsPhone7UXGuide"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="WindowsPhone7UXGuide.buttons"
	SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="ToggleButtonWithIconStyle" TargetType="ToggleButton">
			<Setter Property="Padding" Value="8"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ToggleButton">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Collapsed</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ColorAnimation Duration="0" To="{StaticResource PhoneDisabledColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="CheckStates">
									<VisualState x:Name="Unchecked"/>
									<VisualState x:Name="Checked">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledContent">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ColorAnimation Duration="0" To="{StaticResource PhoneBackgroundColor}" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path" d:IsOptimized="True"/>
											<PointAnimation Duration="0" To="2.42066836357117,6.34379482269287" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[4].(LineSegment.Point)" Storyboard.TargetName="path" d:IsOptimized="True"/>
											<PointAnimation Duration="0" To="5.94532632827759,6.35026788711548" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[5].(LineSegment.Point)" Storyboard.TargetName="path" d:IsOptimized="True"/>
											<PointAnimation Duration="0" To="5.95146465301514,6.34128904342651" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[6].(LineSegment.Point)" Storyboard.TargetName="path" d:IsOptimized="True"/>
											<PointAnimation Duration="0" To="6.17999792098999,4.68826770782471" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[7].(BezierSegment.Point1)" Storyboard.TargetName="path" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Indeterminate"/>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Unfocused"/>
									<VisualState x:Name="Focused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">
								<ContentControl x:Name="EnabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
							<Border x:Name="DisabledBackground" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
								<ContentControl x:Name="DisabledContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
							<Path x:Name="path" UseLayoutRounding="False" HorizontalAlignment="Center" Width="20" Height="26" VerticalAlignment="Center">
								<Path.Data>
									<PathGeometry>
										<PathFigure IsClosed="False" StartPoint="19.2228622436523,10.8611965179443">
											<LineSegment Point="17.6114463806152,10.8611965179443"/>
											<LineSegment Point="17.6114463806152,6.70803356170654"/>
											<BezierSegment Point3="10.0014963150024,2.24347895709798E-05" Point2="14.1971406936646,2.24347895709798E-05" Point1="17.6114463806152,3.0091872215271"/>
											<BezierSegment Point3="2.42999792098999,6.34128904342651" Point2="2.65007328987122,2.81625199317932" Point1="5.94571018218994,2.24347895709798E-05"/>
											<LineSegment Point="2.38941836357117,10.8594207763672"/>
											<LineSegment Point="5.94532632827759,10.8658933639526"/>
											<LineSegment Point="5.95146465301514,6.34128904342651"/>
											<BezierSegment Point3="10.0014963150024,3.39234352111816" Point2="7.89717817306519,3.39234352111816" Point1="6.17999792098999,4.68826770782471"/>
											<BezierSegment Point3="14.0943393707275,6.70803356170654" Point2="14.0943393707275,4.88120317459106" Point1="12.2585763931274,3.39234352111816"/>
											<LineSegment Point="14.0943393707275,10.869423866272"/>
											<LineSegment Point="0.778560936450958,10.8611965179443"/>
											<BezierSegment Point3="1.39754265546799E-05,11.6110973358154" Point2="1.39754265546799E-05,11.1992092132568" Point1="0.348611921072006,10.8611965179443"/>
											<LineSegment Point="1.39754265546799E-05,25.2446517944336"/>
											<BezierSegment Point3="0.778560936450958,26.0000228881836" Point2="0.348611921072006,26.0000228881836" Point1="1.39754265546799E-05,25.6606731414795"/>
											<LineSegment Point="19.2228622436523,26.0000228881836"/>
											<BezierSegment Point3="20.0000133514404,25.2446517944336" Point2="20.0000133514404,25.6606731414795" Point1="19.6515026092529,26.0000228881836"/>
											<LineSegment Point="20.0000133514404,11.6110973358154"/>
											<BezierSegment Point3="19.2228622436523,10.8611965179443" Point2="19.6515026092529,10.8611965179443" Point1="20.0000133514404,11.1992092132568"/>
										</PathFigure>
									</PathGeometry>
								</Path.Data>
								<Path.Fill>
									<SolidColorBrush Color="{StaticResource PhoneForegroundColor}"/>
								</Path.Fill>
							</Path>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<DataTemplate x:Name="MultiLineButtonTemplate">
			<StackPanel>
				<TextBlock Text="{Binding Line1}" HorizontalAlignment="Left" Margin="0,1,0,0" VerticalAlignment="Top" Padding="0,3,0,0" />
				<TextBlock Text="{Binding Line2}" Opacity="0.65" HorizontalAlignment="Left" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,2,0,7"/>
			</StackPanel>
		</DataTemplate>
	</phone:PhoneApplicationPage.Resources>
	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Custom:Interaction.Triggers>
			<Custom:EventTrigger EventName="Loaded">
				<local:SetPivotIndexAction TargetName="pivot"/>
			</Custom:EventTrigger>
		</Custom:Interaction.Triggers>
		<!--Pivot Control-->
		<controls:Pivot x:Name="pivot" Title="BUTTONS">
			<!--Pivot item one-->
			<controls:PivotItem x:Name="buttons_push" Header="push">
				<Grid>
					<ScrollViewer Margin="0,30,0,0">
						<StackPanel HorizontalAlignment="Left">
							<StackPanel HorizontalAlignment="Left" Margin="12,0,0,27">
								<TextBlock TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineHeight="22" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" Text="This is a push button example" VerticalAlignment="Top" HorizontalAlignment="Left"/>
								<Button Content="button" BorderThickness="3" Width="138" Height="73"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-12,-4,0,0"/>
							</StackPanel>
							<StackPanel HorizontalAlignment="Left" Margin="12,0,0,27">
								<TextBlock TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineHeight="22" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" HorizontalAlignment="Left" Text="This is a push button example with wrapping behavior. Example of wrapping behavior"/>
								<Button Content="button" BorderThickness="3" Width="138" Height="73"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-12,-4,0,0"/>
							</StackPanel>
							<StackPanel HorizontalAlignment="Left" Margin="12,0,0,27">
								<TextBlock TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineHeight="22" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" HorizontalAlignment="Left" Text="This is a push button example"/>
								<Button Content="button" BorderThickness="3" Width="138" Height="73"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-12,-4,0,0"/>
							</StackPanel>
							<StackPanel HorizontalAlignment="Left" Margin="12,0,0,27">
								<TextBlock TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeSmall}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineHeight="22" LineStackingStrategy="BlockLineHeight" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Top" HorizontalAlignment="Left"><Run Text="This is a push button example with wrapping behavior. Example of wrapping behavior"/><LineBreak/><Run Text=""/></TextBlock>
								<Button Content="button" BorderThickness="3" Width="138" Height="73"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-12,-4,0,0"/>
							</StackPanel>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>

 			<!--Pivot item two-->
			<controls:PivotItem x:Name="buttons_toggle" Header="toggle">
				<Grid>
					<ScrollViewer Margin="0,0,-1,0">
						<StackPanel>
							<StackPanel VerticalAlignment="Top" Margin="0,0,0,47">
								<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="26" TextAlignment="Left" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Toggle buttons with icon/state change" Margin="{StaticResource PhoneHorizontalMargin}"/>
								<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left" Margin="0,7,0,0"/>
							</StackPanel>
							<StackPanel VerticalAlignment="Top" Margin="0,0,0,57">
								<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="26" TextAlignment="Left" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Toggle buttons with icon/state change" Margin="{StaticResource PhoneHorizontalMargin}"/>
								<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,7,0,0">
									<StackPanel Orientation="Vertical" Width="72">
										<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left"/>
										<TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" FontSize="13" Width="48" LineHeight="13" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Top" Text="Justified Left" Foreground="{StaticResource PhoneForegroundBrush}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" Margin="12,-2,0,0"/>
									</StackPanel>
									<StackPanel Orientation="Vertical" Width="72">
										<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left"/>
										<TextBlock TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" FontSize="13" Width="48" LineHeight="13" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Top" Text="Justified Left" Foreground="{StaticResource PhoneForegroundBrush}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" Margin="12,-2,0,0"/>
									</StackPanel>
								</StackPanel>
							</StackPanel>
							<StackPanel VerticalAlignment="Top" Margin="0,0,0,47">
								<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="26" TextAlignment="Left" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Toggle buttons with icon/state change" Margin="{StaticResource PhoneHorizontalMargin}"/>
								<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left" Margin="0,7,0,0"/>
							</StackPanel>
							<StackPanel VerticalAlignment="Top" Margin="0,0,0,47">
								<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="26" TextAlignment="Left" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Toggle buttons with icon/state change" Margin="{StaticResource PhoneHorizontalMargin}"/>
								<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left" Margin="0,7,0,0"/>
							</StackPanel>
							<StackPanel VerticalAlignment="Top" Margin="0,0,0,47">
								<TextBlock Foreground="{StaticResource PhoneForegroundBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="26" TextAlignment="Left" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Toggle buttons with icon/state change" Margin="{StaticResource PhoneHorizontalMargin}"/>
								<ToggleButton Height="72" Width="72" VerticalAlignment="Top" Style="{StaticResource ToggleButtonWithIconStyle}"  HorizontalAlignment="Left" Margin="0,7,0,0"/>
							</StackPanel>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>
			<controls:PivotItem x:Name="buttons_command" Header="command">
				<Grid>
					<ScrollViewer Margin="0,14,0,0">
						<StackPanel>
							<Button ContentTemplate="{StaticResource MultiLineButtonTemplate}" HorizontalContentAlignment="Left" Margin="0" Padding="10,3,10,5">
								<local:MultiLineItem Line1="primary text" Line2="Example of text without wrapping"/>
							</Button>
							<Button ContentTemplate="{StaticResource MultiLineButtonTemplate}" HorizontalContentAlignment="Left">
								<local:MultiLineItem Line1="primary text" Line2="Example of text wrapping. Example of text wrapping"/>
							</Button>
							<Button ContentTemplate="{StaticResource MultiLineButtonTemplate}" HorizontalContentAlignment="Left">
								<local:MultiLineItem Line1="primary text" Line2="Example of text wrapping. Example of text wrapping"/>
							</Button>
						</StackPanel>
					</ScrollViewer>
				</Grid>
			</controls:PivotItem>
		</controls:Pivot>
	</Grid>
</phone:PhoneApplicationPage>